<template>
  <div>
    <el-card shadow="hover" class="box-card">
      <div slot="header" class="clearfix">
        <span>工作手册上传</span>
      </div>
      <div>
        <el-tabs v-model="activeName" type="card" @tab-click="getList">
          <el-tab-pane label="网格端" name="2"></el-tab-pane>
          <el-tab-pane label="坐席/值班端" name="3"></el-tab-pane>
        </el-tabs>
        <div class="form">
          <el-button type="success" size="small" class="addBut" @click="upDialog = true">新增工作手册</el-button>
          <el-table :data="tableData" border stripe style="width: 100%">
            <el-table-column prop="fileName" label="文件名" align="center"> </el-table-column>
            <el-table-column prop="createTime" label="上传时间" align="center"> </el-table-column>
            <el-table-column fixed="right" label="操作" align="center">
              <template slot-scope="scope">
                <el-button @click="openFile(scope.row)" type="primary" size="small">打开手册</el-button>
                <el-button @click="deleteFile(scope.row)" type="danger" size="small">删除手册</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-card>
    <el-dialog title="工作手册上传" :visible.sync="upDialog" width="400px" :before-close="handleClose">
      <div class="addBut">
        <el-form label-width="80px">
          <el-form-item label="文件名">
            <el-input v-model="file.fileName" placeholder="请输入文件名" clearable></el-input>
            <div>上传工作手册大小不能超过 10MB!</div>
          </el-form-item>
          <el-form-item>
            <el-upload
              :action="upaction + '/matters/upload'"
              :on-success="upSuccess"
              :before-upload="beforeUp"
              :multiple="false"
              :limit="1"
              accept=".pdf"
              :file-list="fileList"
              :headers="headers"
              :on-remove="onRemove"
            >
              <el-button type="success" size="small">上传pdf</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="upDialog = false">取 消</el-button>
        <el-button type="primary" @click="subUpload">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as api from '@/api/project'
import env from '@/utils/env'
export default {
  data() {
    return {
      activeName: '2',
      tableData: [],
      headers: {
        Authorization: localStorage.getItem('Authorization'),
      },
      upDialog: false,
      file: {
        fileName: '',
        fileLocation: '',
      },
      fullscreenLoading: false,
      fileList: [],
      upaction:
        process.env.NODE_ENV === 'production'
          ? env.prod.baseUrl
          : process.env.NODE_ENV === 'test'
          ? env.test.baseUrl
          : env.dev.baseUrl,
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      let data = {
        id: this.activeName,
      }
      api.fileList(data).then(res => {
        if (res.code == '200') {
          this.tableData = res.data
        }
      })
    },
    // 关闭上传框
    handleClose() {
      this.upDialog = false
      this.fileList = []
      this.file = {
        fileName: '',
        fileLocation: '',
      }
    },
    // 打开文件
    openFile(e) {
      window.open(e.fileLocation)
    },
    // 删除文件
    deleteFile(e) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        let data = {
          id: e.id,
        }
        api.remove(data).then(res => {
          if (res.code == '200') {
            this.getList()
            this.$message({
              message: '删除成功',
              type: 'success',
            })
          }
        })
      })
    },
    // 上传成功
    upSuccess(e) {
      this.fullscreenLoading.close()
      if (e.code == '200') {
        this.file.fileLocation = e.data.minIoUrl
        this.fileList = [{ name: this.file.fileName, url: e.data.minIoUrl }]
      } else {
        this.$message.error(e.msg)
      }
    },
    // 上传之前
    beforeUp(e) {
      this.file.fileName = e.name
      this.fullscreenLoading = this.$loading({
        lock: true,
        text: '上传中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      const isJPG = e.type === 'application/pdf'
      const isSize = e.size / 1024 / 1024 < 10
      if (!isJPG) {
        this.$message.error('上传工作手册只能是 PDF 格式!')
        this.fullscreenLoading.close()
      }
      if (!isSize) {
        this.$message.error('上传工作手册大小不能超过 10MB!')
        this.fullscreenLoading.close()
      }
      return isJPG && isSize
    },
    // 删除文件列表
    onRemove() {
      this.fileList = []
      this.file.fileLocation = ''
    },
    // 提交上传
    subUpload() {
      if (!this.file.fileName) {
        this.$message({
          message: '请输入文件名',
          type: 'error',
        })
        return
      }
      if (!this.file.fileLocation) {
        this.$message({
          message: '请上传文件',
          type: 'error',
        })
        return
      }
      this.file.roleId = this.activeName
      api.fileAdd(this.file).then(res => {
        if (res.code == '200') {
          this.getList()
          this.handleClose()
          this.$message({
            message: '上传成功',
            type: 'success',
          })
        } else {
          this.$message.error(res.msg)
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
@import './manual.scss';
</style>
